<template id="goods-select">
	<el-card class="box-card" style="box-shadow:none">
		<div class="search-box">
			<el-form :inline="true" :model="searchForm" class="demo-form-inline" style="margin-top: 20px;">
				<el-form-item label="优惠券名称">
					<el-input v-model="searchForm.name" placeholder="" clearable></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit" icon="el-icon-search" >查询</el-button>
					<el-button type="danger" @click="selectGoods">确定选择</el-button>
					<el-button @click="closeDialog">关闭</el-button>
				</el-form-item>
			</el-form>
		</div>
		<el-table
			:data="tableData"
			@row-click="singleElection"
			highlight-current-row
			:row-style="{ height: '57px'}"
			style="width: 100%;font-size: 12px">
			<el-table-column width="55" label="选择">
				<template #default="scope">
					<el-radio class="radio" v-model="templateSelection" :label="scope.row.id">&nbsp;</el-radio>
				</template>
			</el-table-column>
			<el-table-column
				prop="id"
				width="100px"
				label="ID">
			</el-table-column>
			<el-table-column
				prop="name"
				label="名称">
			</el-table-column>
			<el-table-column
				label="类型">
				<template #default="scope">
					<el-tag type="success" v-if="scope.row.type == 1">满减券</el-tag>
					<el-tag v-if="scope.row.type == 2">折扣券</el-tag>
				</template>
			</el-table-column>
			<el-table-column
				width="110"
				label="优惠金额/折扣">
				<template #default="scope">
					<span v-if="scope.row.type == 1">{{ scope.row.amount }}</span>
					<span v-if="scope.row.type == 2">{{ scope.row.discount }}</span>
				</template>
			</el-table-column>
			<el-table-column
				label="领取上限">
				<template #default="scope">
					{{ scope.row.max_receive_num }}张/人
				</template>
			</el-table-column>
			<el-table-column
				prop="total_num"
				label="发放数量">
			</el-table-column>
			<el-table-column
				prop="received_num"
				label="已领数量">
			</el-table-column>
			<el-table-column
				width="160"
				label="有效期">
				<template #default="scope">
					<span v-if="scope.row.validity_type == 1">{{ scope.row.start_time }} - {{ scope.row.end_time }}</span>
					<span v-else>领取之日后 {{ scope.row.receive_useful_day }} 天</span>
				</template>
			</el-table-column>
			<el-table-column
				label="状态">
				<template #default="scope">
					<el-tag v-if="scope.row.status == 1">进行中</el-tag>
					<el-tag v-if="scope.row.status == 2" type="danger">已作废</el-tag>
					<el-tag v-if="scope.row.status == 3" type="primary">已过期</el-tag>
					<el-tag v-if="scope.row.status == 4" type="success">已领完</el-tag>
				</template>
			</el-table-column>
		</el-table>
		<Pages :form="searchForm" :page-obj="page" @pageChange="handlePageChange" @pageJump="jump"></Pages>
	</el-card>
</template>

<script>
import Pages from "@/components/pages/index.vue";

export default {
	components: {Pages},
	data() {
		return {
			searchForm: {
				name: '',
				status: 0,
				limit: 15,
				page: 1
			},
			page: {
				total: 0
			},
			tableData: [],
			selectedCoupon: [],
			templateSelection: "",
		}
	},
	mounted() {
		this.getList();
	},
	methods: {
		onSubmit() {
			this.searchForm.page = 1
			this.getList()
		},
		// 选择状态
		checkTab(type) {
			this.searchForm.tab_type = type
			this.getList()
		},
		// 单选
		singleElection(row) {
			this.templateSelection = row.id
			this.selectedCoupon = this.tableData.filter((item) => item.id === row.id)
		},
		handleSelectionChange(val) {
			this.selectedCoupon = [];
			val.forEach(item => {
				this.selectedCoupon.push(item)
			})
		},
		// 翻页
		handlePageChange(page) {
			this.searchForm.page = page
			this.getList()
		},
		jump() {
			this.getList()
		},
		async getList() {
			let res = await this.$API.coupon.list.get(this.searchForm)
			this.tableData = res.data.data
			this.page.total = res.data.total
		},
		selectGoods() {
			if (this.selectedCoupon.length == 0) {
				this.$message.error('请选择要使用的商品')
				return false
			}
			let selectedCoupon = JSON.parse(JSON.stringify(this.selectedCoupon))
			this.selectedCoupon = []
			this.templateSelection = ''
			this.$emit('selected-coupon', selectedCoupon)
		},
		closeDialog() {
			this.$emit('close-dialog')
		}
	}
}
</script>
